import React, { memo ,useState} from 'react'
import { Card, Table,Button, Modal, message } from 'antd'

export default memo(function Index() {
    const columns = [
        {
            title: 'Full Name',
            width: 100,
            dataIndex: 'name',
            key: 'name',
            fixed: 'left',
        },
        {
            title: 'Age',
            width: 100,
            dataIndex: 'age',
            key: 'age',
            fixed: 'left',
        },
        { title: 'Column 1', dataIndex: 'address', key: '1' },
        { title: 'Column 2', dataIndex: 'address', key: '2' },
        { title: 'Column 3', dataIndex: 'address', key: '3' },
        { title: 'Column 4', dataIndex: 'address', key: '4' },
        { title: 'Column 5', dataIndex: 'address', key: '5' },
        { title: 'Column 6', dataIndex: 'address', key: '6' },
        { title: 'Column 7', dataIndex: 'address', key: '7' },
        { title: 'Column 8', dataIndex: 'address', key: '8' },
        {
            title: 'Action',
            key: 'operation',
            fixed: 'right',
            width: 100,
            // eslint-disable-next-line
            render: () => <a>action</a>,
        },
    ]

    const data = [];
    for (let i = 0; i < 100; i++) {
        data.push({
            key: i,
            name: `Edrward ${i}`,
            age: 32,
            address: `London Park no. ${i}`,
        });
    }
    const columns1 = [
        {
            id: 'ID',
            dataIndex: 'key'
        },
        {
            title: '姓名',
            dataIndex: 'name'
        },
        {
            title: '年龄',
            dataIndex: 'age'
        },
        {
            title: '地址',
            dataIndex: 'address'
        },
        {
            title: '操作',
            key: 'operaion',
            render: (row, record) => {
                return <Button onClick={() => removeItem(row, record.key)}>删除</Button>
            }
        }
    ]
    const removeItem = (row, key) => {
        console.log(row, key)
        Modal.confirm({
            title: '删除内容',
            content: `你忍心删除${row.name}吗？`,
            onOk: () => {
                setState(state.filter(item => item.key !== key))
                message.success('删除成功!')
            }
        })
    }
    const data1 = [
        {
            key: '1',
            name: '啊哈1',
            age: 18,
            address: '幸福里大道1号'
        },
        {
            key: '2',
            name: '啊哈2',
            age: 18,
            address: '幸福里大道2号'
        },
        {
            key: '3',
            name: '啊哈3',
            age: 18,
            address: '幸福里大道3号'
        },
        {
            key: '4',
            name: '啊哈4',
            age: 18,
            address: '幸福里大道4号'
        },
        {
            key: '5',
            name: '啊哈5',
            age: 18,
            address: '幸福里大道5号'
        },
    ]
    const [state, setState] = useState(data1)
    return (
        <div>
            <Card title='宽度固定的表格' style={{ width: '800px' }}>
                {/* 这个是固定前后的列,横向滚动查看其它数据需要和scroll.x配合使用  */}
                <Table dataSource={data} columns={columns} scroll={{ x: 1000 }} />
            </Card>
            <Card title='可删除的表格'>
                <Table 
                    dataSource={state} 
                    columns={columns1} 
                    scroll={{x: 1000}}
                    bordered />
            </Card>
        </div>

    )
})